@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300&subset=latin,latin-ext");
@import url("https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=latin,latin-ext");

body 
{ 
	font-family: 'Open Sans', sans-serif; font-size: 2em; color: #404040;

}
#container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
	background-color: transparent;
	color: #cccccc;
	display: none;
}

#playerbg
{
	background-image: linear-gradient(180deg,rgba(25,35,45,1),rgba(20,30,70,0.75)),linear-gradient(90deg,#f00,#38f);
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    z-index: -2;
}
#player {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -10;
    opacity: 1;
}
#player.idle
{
	opacity: 0;
	transition: opacity 500ms linear;
}
#player video {
    width: 100%;
}
div#title
{
	position: absolute;
	height: 100%;
	width: 40%;
	padding: 0% 50% 0% 10%;
	background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,.8), rgba(0,0,0,0.0));
	z-index: 2;
	opacity: 0;
	transition: opacity 500ms linear;
}

#title span.titleButton
{
	font-size: 0.5em;
	display: inline-block;
	text-transform: uppercase;
	color: #ffffff;
	border: 2px solid #cccccc;
	margin-left: 1%;
	padding: 2% 4%;
	border-radius: 0.2em;
	cursor: pointer;
}
span.titleButton:hover
{
	background-color: #3388ff;
	border-color: #3388ff;
}

img.logo 
{
	height: 0.75em;
}
div#loaderAnim 
{ 
	position: fixed;
	top: 0%;
	height: 100%;
	width: 50%; 
	left: 50%;
	opacity: 0;
	text-align: center;
	transition: opacity 500ms linear;
	z-index: 3;
}
#container.mode_reader div#loaderAnim 
{
	position: absolute; 
}
div#loaderAnim.active
{
	opacity: 1;
}
div.loaderCube 
{
	display: inline-block;
	background-color: #3388ff;
	width: 1em;
	height: 1em;
	margin: 0.25em;
	border-radius: 0.2em;
	animation-name: loaderCubeAnim;
	animation-duration: 0.9s;
	animation-iteration-count: infinite;
	animation-direction: linear; 
	-webkit-animation-name: loaderCubeAnim;
	-webkit-animation-duration: 0.9s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: linear; 
}

div.loaderCube2 { animation-delay: 0.3s; -webkit-animation-delay: 0.3s;}
div.loaderCube3 { animation-delay: 0.6s; -webkit-animation-delay: 0.6s;}

@keyframes loaderCubeAnim
{
	0%{
	opacity: 0;
	}

	100%{
	opacity: 1;
	}
}
@-webkit-keyframes loaderCubeAnim
{
	0%{
	opacity: 0;
	}

	100%{
	opacity: 1;
	}
}

div#main 
{ 
	position: absolute;
	top: 100%;
	height: 100%;
	width: 100%; 
	left: 0%;
}
div#secondary
{
	position: absolute;
	width: 100%;
	top: 100%;
	display: none;
	color: #404040;
	padding-bottom: 2em;
}

#container.mode_reader #main
{
	display: none;
}

#container.mode_reader #secondary
{
	display: block;
}

div.slide 
{
	padding: 0% 50% 0% 10%;
	width: 40%;
	height: 100%;
	background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,.4), rgba(0,0,0,0.0));
	border-top: 1px dotted rgba(255, 255, 255, 0.2);
	transition: background 500ms linear;
}
div.alignMiddle
{
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);

}
div.slide:nth-child(odd)
{
	background: linear-gradient(to right, rgba(0,0,0,0.9), rgba(0,0,0,.4), rgba(0,0,0,0.0));
}

div.active_slide, div.active_slide:nth-child(odd)
{
	background: linear-gradient(to right, rgba(14,34,64,0.8), rgba(14,34,64,0.4), rgba(14,34,64,0.0));
}

div.slide:hover
{
	cursor: pointer;
}
h1 
{ 
	font-family: 'Open Sans'; font-size: 0.8em; margin: 0.5em 0em 0.5em 0em;
	font-weight: 200;
}

h2 
{ 
	font-family: 'Open Sans'; font-size: 1.2em; margin: 0.6em 0em 0.6em 1em;
	list-style-type: square;
	display: list-item;
	font-weight: 200;
}

p
{
	margin: 0.6em 0em;
	font-size: 1.2em;
	line-height: 1.8em;
	font-weight: 200;
}
a
{
	color: #3388ff;
}
div.text
{
	padding: 0em 4em 0em 4em;
}

div.text:first-child
{
	padding-top: 1em;
}
div.text h1
{
	color: #3388ff;
	font-size: 1.5em;
}
div.text p
{
	font-size: 0.8em;
	line-height: 1.5em;
}
#title h1
{
	text-transform: uppercase;
	font-size: 2em;
	color: #ffffff;
	margin-top: 2em;
}
#title p
{
	font-size: 1em;
	line-height: 1.5em;
}

#container.mode_reader #player, #container.mode_reader #playerbg 
{
	position: absolute;
}

#modeselector_container
{
	position: fixed;
	text-align: right;
	font-size: 0.5em;
	left: 0px;
	right: 0px;
	bottom: -3.5em;
	width: 98%;
	padding: 1%;
	background: rgba(0,0,0,0.8);
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateZ(0);
	-webkit-transition: bottom 200ms linear;
	transition: bottom 200ms linear;
	z-index: 11;
}

#toactive_container
{
	position: fixed;
	top: -2em;
	right: 0em;
	z-index: 13;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateZ(0);
	width: 7em;
	text-align: right; 
	transition: top 200ms linear;
}

#toactive_container.shown
{
	top: 0em;
}

#toactive_container span
{
	font-size: 0.5em;
	display: inline-block;
	text-transform: uppercase;
	color: #ffffff;
	background-color: #3388ff;
	margin: 4%;
	padding: 4% 8%;
	border-radius: 0.2em;
	cursor: pointer;
}

.button
{
	font-size: 0.5em;
	display: inline-block;
	text-transform: uppercase;
	color: #ffffff;
	background-color: #3388ff;
	margin: 4%;
	padding: 3% 4%;
	border-radius: 0.2em;
	cursor: pointer;
}

#modeselector_container:hover
{
	bottom: 0em;
}

#modeselector_container span
{
	
	display: inline-block;
	text-transform: uppercase;
	color: #ffffff;
	background-color: #404040;
	margin-left: 1%;
	padding: 1%;
	border-radius: 0.2em;
	cursor: pointer;
}

#video_ctrl
{
	position: absolute;
	left: 0.5em;	
}

#container.mode_reader span#ms_reader
{
	background-color: #3388ff;
}

#container.mode_skimmer span#ms_skimmer
{
	background-color: #3388ff;
}

#container.mode_leanback span#ms_leanback
{
	background-color: #3388ff;
}

#container.mode_reader .text:hover h1:after
{
	content: "Click to play this";
	font-size: 0.4em;
	margin-left: 1em;
	color: #3388ff;
	cursor: pointer;
}

#container.mode_reader #toactive_container
{
	display: none;
}

#container.mode_reader #playerbg
{
	/* background-image: white; */
}


#loginOverlay
{
	position: absolute;
	width: 40%;
	height: 100%;
	padding: 0% 30%;
	background-image: linear-gradient(180deg,rgba(25,35,45,1),rgba(20,30,70,0.75)),linear-gradient(90deg,#f00,#38f);
	color: #cccccc;
	text-align: center;
}
#loginOverlay p
{
	font-size: 0.5em;
}
#loginMessage
{
	opacity: 0;
	transition: opacity 500ms linear;
}

/*


/*
Respnsive media queries
*/

@media screen and (min-width:240px) { #container { font-size:19%; } }
@media screen and (min-width:264px) { #container { font-size:21%; } }
@media screen and (min-width:290px) { #container { font-size:23%; } }
@media screen and (min-width:319px) { #container { font-size:26%; } }
@media screen and (min-width:351px) { #container { font-size:28%; } }
@media screen and (min-width:386px) { #container { font-size:31%; } }
@media screen and (min-width:425px) { #container { font-size:34%; } }
@media screen and (min-width:468px) { #container { font-size:38%; } }
@media screen and (min-width:515px) { #container { font-size:42%; } }
@media screen and (min-width:567px) { #container { font-size:46%; } }
@media screen and (min-width:624px) { #container { font-size:50%; } }
@media screen and (min-width:686px) { #container { font-size:55%; } }
@media screen and (min-width:755px) { #container { font-size:61%; } }
@media screen and (min-width:831px) { #container { font-size:67%; } }
@media screen and (min-width:914px) { #container { font-size:74%; } }
@media screen and (min-width:1005px) { #container { font-size:81%; } }
@media screen and (min-width:1106px) { #container { font-size:89%; } }
@media screen and (min-width:1217px) { #container { font-size:98%; } }
@media screen and (min-width:1339px) { #container { font-size:108%; } }
@media screen and (min-width:1473px) { #container { font-size:119%; } }
@media screen and (min-width:1620px) { #container { font-size:131%; } }
@media screen and (min-width:1782px) { #container { font-size:144%; } }
@media screen and (min-width:1960px) { #container { font-size:158%; } }
@media screen and (min-width:2156px) { #container { font-size:174%; } }
@media screen and (min-width:2372px) { #container { font-size:191%; } }
@media screen and (min-width:2609px) { #container { font-size:210%; } }
@media screen and (min-width:2870px) { #container { font-size:231%; } }
@media screen and (min-width:3157px) { #container { font-size:255%; } }
@media screen and (min-width:3473px) { #container { font-size:280%; } }
@media screen and (min-width:3820px) { #container { font-size:308%; } }
@media screen and (min-width:4202px) { #container { font-size:339%; } }